<template>
  <div class="content_body">
    <div style="margin: 10px 0 10px 10px;">
      <el-button-group>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="openAdd()">新增接口</el-button>
        <el-button type="primary" icon="el-icon-search" @click="load()">查询接口</el-button>
      </el-button-group>
        <el-row>
          <el-col :span="4">
      <el-input v-model="pageInfo.url" placeholder="URL"></el-input>
          </el-col>
          <el-col :span="4">
      <el-input v-model="pageInfo.name" placeholder="接口名称"></el-input>
          </el-col>
        </el-row>
    </div>
    <div style="margin: 0 10px 0 10px;">
      <el-table
        ref="multipleTable"
        :data="beanList"
        tooltip-effect="dark"
        style="width: 100%"
        border>
        <el-table-column prop="name" label="接口名称"  min-width="15%" header-align="center"></el-table-column>
        <el-table-column prop="url" label="接口地址" min-width="20%" header-align="center"></el-table-column>
        <el-table-column label="是否开放用户侧" min-width="10%" header-align="center">
           <template slot-scope="scope">
             {{scope.row.is_open_user == '1'? '开放': '不开放'}}
          </template>
        </el-table-column>
        <el-table-column label="接口类型" min-width="10%" header-align="center">
          <template slot-scope="scope">
             {{scope.row.type == '1'? 'service': 'xml'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="15%" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-right">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNo"
            :page-sizes="[10, 50, 100, 500]"
            :page-size="pageInfo.pageSize"
            layout="sizes, prev, pager, next"
            :total="pageInfo.totalRecord">
          </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="添加接口" :visible.sync="dialogAddFormVisible" :modal-append-to-body="false" width="60%">
        <el-form :model="pageForm">
            <div class="line-right">
              <el-form-item label="接口名称" :label-width="formLabelWidth">
                <el-input v-model="pageForm.name" auto-complete="off"></el-input>
              </el-form-item>
            </div>
            <div class="line-left">
              <el-form-item label="接口地址" :label-width="formLabelWidth">
                <el-input v-model="pageForm.url" auto-complete="off"></el-input>
              </el-form-item>
            </div>
            <div class="line-left">
              <el-form-item label="开放用户侧" :label-width="formLabelWidth">
                <el-radio v-model="pageForm.is_open_user" label="1">开放</el-radio>
                <el-radio v-model="pageForm.is_open_user" label="0">不开放</el-radio>
              </el-form-item>
            </div>
            <div class="line-left">
              <el-form-item label="接口类型" :label-width="formLabelWidth">
                <el-radio v-model="pageForm.type" label="1">service</el-radio>
                <el-radio v-model="pageForm.type" label="0">xml</el-radio>
              </el-form-item>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="ok()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "url",
  data() {
    return {
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      pageForm: {},
      beanList: [],
      beanAllList: [],
      formLabelWidth: "100px",
      dialogAddFormVisible: false,
      url: "save"
    };
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.ajax({
        url: this.API.apiurl.page,
        data: this.pageInfo,
        success: resultData => {
          this.beanList = resultData.data.results;
          this.pageInfo.totalRecord = resultData.data.totalRecord;
        }
      });
      this.ajax({
        url: this.API.apiurl.list,
        data: {},
        success: resultData => {
          this.beanAllList = resultData.data;
        }
      });
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNo = val;
      this.load();
    },
    openAdd() {
      this.pageForm = {
        name: "",
        url: "",
        is_open_user: "0",
        type: "1"
      };
      this.url = "save";
      this.dialogAddFormVisible = true;
    },
    handleEdit(index, bean) {
      this.pageForm = bean;
      this.url = "update";
      this.dialogAddFormVisible = true;
    },
    handleDelete(index, bean) {
      this.url = "delete";
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          Object.assign(this.pageForm, bean);
          this.ajax({
            url: this.API.apiurl[this.url],
            data: this.pageForm,
            success: resultData => {
              if (resultData.status === 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.load();
              } else {
                this.$message({
                  showClose: true,
                  message: resultData.msg,
                  type: "error"
                });
              }
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    ok() {
      this.ajax({
        url: this.API.apiurl[this.url],
        data: this.pageForm,
        success: resultData => {
          if (resultData.status === 0) {
            this.$message({
              message: "恭喜你，记录已保存成功",
              type: "success"
            });
            this.load();
            this.dialogAddFormVisible = false;
          } else {
            this.$message({
              showClose: true,
              message: resultData.msg,
              type: "error"
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-pagination {
  margin-top: 0.5rem;
}
</style>

